<template>
  <el-dialog
    ref="refDlg"
    title="详情"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="600px"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" class="financeForm" :model="queryObj" size="mini" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="门店建设项目号:" prop="shopCode">
              <span>{{ queryObj.constCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属门店:" prop="customerCode">
              <span>{{ queryObj.shopName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="装修任务号:" size="mini">
              <span>{{ queryObj.decorationTaskCode }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="评估类别:" size="mini" prop="moneyInit">
              <span>{{ queryObj.scoreType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总分值:" size="mini">
              <span>{{ queryObj.totalScore }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="评估说明:" size="mini">
              <span>{{ queryObj.scoreDesc }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实际得分" size="mini">
              <span>{{ queryObj.actualScore }}</span>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div>
        <el-table
          v-loading="tableLoading"
          element-loading-text="加载中"
          :data="tableData"
          border
          highlight-current-row
          max-height="400"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="detailItem" label="考核明细" min-width="100" />
          <el-table-column prop="grading" label="评分标准" min-width="150" />
          <el-table-column prop="scoreDesc" label="评分说明" show-overflow-tooltip min-width="150" />
        </el-table>
      </div>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">返回</el-button>
      <!-- <el-button size="mini" type="primary" @click="submitForm">保存</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
// import { saveCostCenter } from '@/api/costCenter'
// import { getUserInfo } from '@/utils/auth'
import { queryProEvaluation } from '@/api/constructionUnitMng'
export default {
  name: 'RecordDetail',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      readonly: false,
      storeList: [],
      customer: [],
      tableData: [],
      queryObj: {
        recordId: null,
        shopName: '',
        shopCode: '',
        customerName: '',
        customerCode: '',
        mobilePhone: '',
        moneyInit: '',
        moneyPayment: '',
        moneyThis: '',
        remark: '',
        disCode: ''
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.tableLoading = true
    // this.queryObj = this.detailData.data
    const obj = { 'scoreNature': this.detailData.data.scoreNature }
    const formData = new FormData()
    formData.append('decorationTaskCode', this.detailData.data.decorationTaskCode)
    formData.append('unitCode', this.detailData.data.unintCode)
    formData.append('paramsRaw', JSON.stringify(obj))
    queryProEvaluation(formData).then(res => {
      if (res.success && res.data && res.data.length) {
        const arr = res.data.map(item => item.assessDetailsDtos)
        this.tableData = arr.flat(Infinity)
        this.queryObj = res.data
        this.queryObj.constCode = this.detailData.data.constCode
        this.queryObj.shopName = this.detailData.data.shopName
        this.queryObj.decorationTaskCode = this.detailData.data.decorationTaskCode
      }
      this.tableLoading = false
    })
  },

  methods: {
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.queryObj = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
</style>
